<template>
	<div class="lmenu" v-if="menus.length">
		<!-- <h3>{{ title }}<span :class="showMenu ? 'active' : 'normal'" @click="openMenu"></span></h3> -->
		<div class="menu-item" :class="isActive(item) ? 'active' : ''" v-for="item in menus" :key="item.colPath" @click="selectMenu(item)">
			<span slot="title">{{ item.colTitle }}</span>
		</div>
	</div>
</template>

<script>
export default {
	directives: {
		bottom: {
			bind(el) {
				let icon = el.getElementsByClassName('el-submenu__icon-arrow el-icon-arrow-down')[0]
				if (icon) {
					icon.className = 'el-submenu__icon-arrow el-icon-caret-bottom'
					icon.style.fontSize = '18px'
				}
			},
		},
	},
	props: {
		// menu结构 数据源
		/* {
			  name: '',         // 显示名称
			  path: '',         // 跳转路径、索引
			  children: []      // 子菜单
			} */
		menus: {
			type: Array,
			default: () => {
				return []
			},
		},
		// 默认选项
		activeIndex: {
			type: String,
			default: '',
		},
		// 显示名称
		title: {
			type: String,
			default: '',
		},
		// 是否展示菜单
		expand: {
			type: Boolean,
			default: true,
		},
	},
	computed: {
		isActive() {
			return (item) => {
				const queryStr = JSON.stringify(this.$route.query)
				if (queryStr.includes(item.colId)) {
					return true
				}
				return false
			}
		}
	},
	mounted() {
		window.addEventListener('resize', this.handleResize, true)
	},
	data() {
		return {
			showMenu: this.expand,
			defaultActive: '',
		}
	},
	methods: {
		// 展开菜单
		openMenu() {
			this.showMenu = !this.showMenu
		},
		// 选中菜单
		selectMenu(item) {
			if (item) {
				this.defaultActive = item.colPath
				this.$emit('selectMenu', { path: item.colPath, item })
			}
		},
		openIndex(index) {
			// 展开索引菜单
			this.$refs.menu.open(index)
		},
		handleResize() {
			this.screenWidth = window.innerWidth
			if (this.screenWidth >= 1024) {
				this.showMenu = true
			}
		},
		findNodeById(root, activeIndexPath) {
			if (root.colId === activeIndexPath) {
				return root
			}
			for (let child of root.children) {
				const result = this.findNodeById(child, activeIndexPath)
				if (result) {
					return result
				}
			}
			return null
		},
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.handleResize)
	},
}
</script>

<style lang="scss" scoped>
$clickColor: $mainColor;

@media (max-width: 576px) {
	h3 {
		font-size: 18px !important;
	}
}

.el-menu-item {
	background-color: white;
	margin-bottom: 50px;
	background-color: rgba(199, 6, 1, 0.1);
}

.el-menu-item.is-active {
	background-color: $mainColor !important;
	// border-left: 6px solid $clickColor;
	color: white;
	font-weight: bold;
}

.el-menu-item:hover {
	// border-left: 6px solid $clickColor;
	color: $clickColor;
}

.el-submenu ::v-deep.el-submenu__title:hover {
	// border-left: 6px solid $clickColor;
	color: $clickColor;
	// background-color: #41a3fb !important;
}

.lmenu {
	.menu-item {
		cursor: pointer;
		width: 320px;
		font-family: '等线';
		text-align: right;
		color: #fff;
		line-height: 80px;
		font-weight: 600;
		// margin-right: 10px;
		font-size: 24px;
		padding-right: 90px;
		margin-bottom: 20px;
		background-color: #AAAAAA;
		transition: transform .3s ease-in-out;
	}

	.menu-item:hover {
		transform: scale(1.1);
		background-color: $mainColor;
	}

	.active {
		background-color: $mainColor;
	}

	ul {
		color: #333;
		font-size: 16px;
		font-family: '微软雅黑';
		text-align: left;
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		outline: none;
		// box-shadow: 5px 5px 5px rgba(0, 0, 0, .05);
		/*border-left: 8px solid #529e2f;*/
		// border-left: 8px solid $mainColor;
		background-position: right bottom;
		border-bottom: 1px solid #e6e6e6;
	}
}

/* 添加一个自定义类 .custom-menu-hover-color */
.custom-menu-hover-color .el-menu-item:hover,
.custom-menu-hover-color .el-submenu__title:hover {
	background-color: $mainColor !important;
	/* 这里设置你想要的颜色 */
	color: white;
}
</style>
